
<template>
  <!-- 新闻资讯 -->
  <div class="t4_content" style="background: #f7f8fa">
    <div class="t4_banner">
      <div class="t4_w">
        <div class="t4_bannerBOX">
          <el-input
            v-model="searchInfo"
            type="text"
            name="keywords"
            id="keywords"
            placeholder="请输入资源名称"
            clearable
            @keyup.enter.native="clearText"
          >
            <el-button @click="clearText" slot="append" icon="el-icon-search"
            >搜索</el-button
            >
          </el-input>
        </div>
      </div>
    </div>
    <div class="t4_w" style="position: relative">
      <!-- 面包屑 -->
      <div class="t4_local">
        <span class="local-tag"
        ><img src="@/assets/images/sub_ts.png" alt=""
        /></span>
        <a href="/">首页</a> &gt;<span style="color: #6666">新闻资讯</span>
      </div>
      <!-- 内容 -->
      <div class="hotspotDataBox">
        <div class="hotspotData_left">
          <div class="hotspotData_item">
            <span>新闻资讯</span>
          </div>
          <div
            class="hotspotData_items"
            v-for="(item, index) in tabs"
            :key="index"
            @click="add(item, index)"
            :tabs="tabs.name"
            :style="{
              backgroundColor: currentIndex === index ? '#215583' : '#072947',
            }"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="hotspotData_rigth">
          <newsInformationList v-if="activeTabIndex == 0" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { issjj } from "../../utils/httpUtils";
import newsInformationList from "./components/newsInformationList";
export default {
  components: {
    newsInformationList
  },
  data() {
    return {
      currentIndex: 0,
      searchInfo: "",
      tabs: [],
      activeTabIndex: 0,
    };
  },
  mounted() {
    this.getissjj()
  },
  methods: {
    getissjj(){
      // issjj().then(res=>{
      //   console.log(res,'是否数据局用户')
      //   // if (res.msg === '1') {
          this.tabs.push({ name: "新闻资讯列表", index: 0 });
      //   // } else if (res.msg === '0') {
      //   //
      //   // }
      // })
    },
    clearText(event) {
      event.stopPropagation();
      this.searchInfo = "";
    },


    add(item, index) {
      this.currentIndex = index;
      console.log(item);
      this.activeTabIndex = item.index;
    },
  },
};
</script>

<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hotspotDataBox {
  padding-bottom: 25px;
  display: flex;
  justify-content: space-between;
  min-height: 800px;
}
.hotspotDataBox .hotspotData_left {
  width: 20%;
  background-color: #072947;
  overflow: auto;
}
.hotspotDataBox .hotspotData_left .hotspotData_item {
  height: 65px;
  line-height: 65px;
  background: #198ef8;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 65px;
}
.hotspotDataBox .hotspotData_left .hotspotData_items {
  height: 57px;
  line-height: 57px;
  text-align: center;
  font-size: 15px;
  border-bottom: 1px #39546c solid;
  color: white;
  cursor: pointer;
}
.hotspotDataBox .hotspotData_left::-webkit-scrollbar {
  width: 6px;
  /* 设置滚动条宽度 */
}

.hotspotDataBox .hotspotData_left::-webkit-scrollbar-thumb {
  background-color: #d5d5d5;
  /* 设置滑块颜色 */
  border-radius: 5px;
  /* 设置滑块边框圆角 */
}

.hotspotDataBox .hotspotData_left::-webkit-scrollbar-track {
  background-color: #edeef0;
  /* 设置轨道颜色 */
}
.hotspotDataBox .hotspotData_rigth {
  width: 77%;
  padding: 20px;
  background-color: #fff;
  border: 1px #edeef0 solid;
  /*height: 560px;*/
}
.hotspotDataBox .hotspotData_rigth .lists-box {
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ededed;
}
.hotspotDataBox .hotspotData_rigth .lists-box .list_title {
  font-size: 18px;
  border-bottom: 2px solid #149bff;
}
.hotspotDataBox .hotspotData_rigth .lists-box .list_title span {
  color: #149bff;
}
.hotspotDataBox .hotspotData_rigth .lists-box .list_jn {
  width: 108px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  font-size: 14px;
  background: #149bff;
  border-radius: 15px;
  margin-top: 13px;
  color: #fff;
}
.hotspotDataBox .hotspotData_rigth .lists_item {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ededed;
  display: flex;
}
.hotspotDataBox .hotspotData_rigth .lists_item .list_sp {
  color: #4a8ef9;
  font-size: 14px;
}
.hotspotDataBox .hotspotData_rigth .lists_item .lists_ul {
  display: flex;
}
.hotspotDataBox .hotspotData_rigth .lists_item .lists_ul .lists_li {
  color: black;
  margin: 12px 10px 0 0;
  padding: 0 15px;
  height: 26px;
  line-height: 26px;
  border-radius: 13px;
  cursor: pointer;
  font-size: 15px;
}
.hotspotDataBox .hotspotData_rigth .lists_item .lists_ul .proAct {
  background-color: #218fff;
  color: #fff;
}
.hotspotDataBox .hotspotData_rigth .lists_item .lists_ul .input-with-select {
  width: 330px;
}
.hotspotDataBox .hotspotData_rigth .lists_item .lists_ul .lists_sjx {
  margin: 0 10px;
  cursor: pointer;
}
.hotspotDataBox .hotspotData_rigth .li_item {
  height: 220px;
  background: rgb(249, 249, 249);
  display: flex;
  margin: 20px 0;
}
.hotspotDataBox .hotspotData_rigth .li_item .imageBox {
  width: 15%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hotspotDataBox .hotspotData_rigth .li_item .imageBox img {
  width: 72px;
  height: 72px;
}
.hotspotDataBox .hotspotData_rigth .li_item .tex_item {
  width: 85%;
  height: 100%;
  padding: 20px;
}
.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tex_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tex_top .tex_bt {
  font-size: 18px;
  color: #333;
}
.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tex_top .text_fs {
  font-size: 15px;
}
.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tex_top .text_fs .fs {
  margin-right: 10px;
}

.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tex_fwb {
  font-size: 14px;
  color: #666;
  padding: 10px 0;
}
.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tex_bot {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  margin-top: 10px;
}
.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tex_bot .tex_botItem {
  text-align: center;
}
.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tex_bot .tex_botItem .ftcolor {
  color: #0083ff;
}

.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tp_item {
  display: flex;
  justify-content: flex-end; /* 将内容向右对齐 */
  align-items: center; /* 垂直居中 */
  font-size: 15px;
  margin-top: 10px;
}
.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tp_item .tp_xz {
  margin-right: 20px;
  text-align: center;
}

.t4_banner {
  position: relative;
}
.t4_banner .t4_bannerBOX {
  width: 90%;
  margin: 0 auto;
}
.t4_banner .t4_bannerBOX .list_Ul {
  cursor: pointer;
  display: flex;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 40px;
  height: 10px;
  font-size: 14px;
}
.t4_banner .t4_bannerBOX .list_Ul li {
  margin-left: 10px;
  color: #5f5f5f;
}
.t4_banner .t4_bannerBOX .list_Ul a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/deep/ .t4_banner .el-input-group--append .el-input__inner {
  height: 50px;
  line-height: 50px;
  background: #fff;
  border: 1px solid #fff;
  color: rgb(99, 99, 99);
  text-indent: 15px;
}
/deep/ .t4_banner .el-input-group__append {
  background-color: #198ef8;
  color: #fff;
  border: none;
}
</style>


